<template>
  <div class="app-container">
    <el-card>
      <main-header
        :serialno="serialno"
        @download="download"
        @search="search"
        @reset="reset"
      />
      <list
        :results="results"
        @add="add"
        @edit="edit"
        @detail="detail"
      />
    </el-card>
    <el-dialog
      v-el-drag-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <main-form
        :form-data="formData"
        @submit="submit"
      />
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import MainHeader from './component/main-header'
import List from './component/list'
import MainForm from './component/main-form'
import CommonMixin from '@/mixin/CommonMixin'
import { getAll, updateOne } from '@/api/weatherDaily'
import { dclassCodeMap } from '@/utils/constant'
import { removeEmptyField } from '@/utils'
import { mapGetters } from 'vuex'
export default {
  components: {
    MainHeader,
    List,
    MainForm
  },
  directives: { elDragDialog },
  mixins: [CommonMixin],
  data() {
    return {
      results: [],
      dialogVisible: false
    }
  },
  computed: {
    ...mapGetters(['devices']),
    serialno() {
      return this.devicesFilter && this.devicesFilter.length > 0 && this.devicesFilter[0].serialno || ''
    },
    devicesFilter() {
      return this.devices.filter(val => {
        return +val.product_type === dclassCodeMap.qxz
      })
    }
  },
  methods: {
    async getList() {
      this.listQuery.pagesize = 1000
      this.listQuery.serialno = this.listQuery.serialno || this.serialno
      const { data } = await getAll(removeEmptyField(this.listQuery))
      this.results = data.data
    },
    async submit(formData) {
      formData.id = +formData.id
      const { msg } = await updateOne(formData.id, formData)
      this.$message.success(msg)
      this.dialogVisible = false
      this.getList()
    },
    add() {
      this.dialogVisible = true
    },
    edit(row) {
      this.formData = row
      this.dialogVisible = true
    },
    detail(row) {
      console.log(row)
    },
    search(searchData) {
      Object.assign(this.listQuery, searchData)
      this.getList()
    },
    download(searchData) {
      console.log(searchData)
    },
    reset() {
      console.log('reset')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
